<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-upload />
    </t-card>

    <t-card header="不同渲染方式">
      <div class="cpm-separator">照片墙：type="img"</div>
      <lg-upload type="img" />

      <div class="cpm-separator">表格形式：type="table"</div>
      <lg-upload type="table" />
    </t-card>

    <t-card header="组件插槽">
      <div class="cpm-separator">选择文件：#default</div>
      <lg-upload>
        <t-button>点我上传</t-button>
      </lg-upload>

      <div class="cpm-separator">手动上传：#upload</div>
      <lg-upload manual>
        <template #upload>
          <t-button theme="warning">点我上传</t-button>
        </template>
      </lg-upload>

      <div class="cpm-separator">文件列表：#files</div>
      <lg-upload>
        <template #files="{ files }">
          {{ files }}
        </template>
      </lg-upload>

      <div class="cpm-separator">完全自定义：#custom</div>
      <lg-upload>
        <template #custom="{ files, choose, remove }">
          <div v-for="(x, i) in files" @click="remove(i)">{{ x.name }}</div>
          <t-button @click="choose">点我选择</t-button>
        </template>
      </lg-upload>
    </t-card>

    <t-card header="值类型">
      <div class="cpm-separator">默认：FileVO[]</div>
      <lg-upload v-model="def" />
      值：{{ def }}

      <div class="cpm-separator">文件信息：value-type="info"</div>
      <lg-upload v-model="info" value-type="info" />
      值：{{ info }}

      <div class="cpm-separator">文件信息多个：value-type="infoList"</div>
      <lg-upload v-model="infoList" value-type="infoList" />
      值：{{ infoList }}

      <div class="cpm-separator">路径：value-type="url"</div>
      <lg-upload v-model="url" value-type="url" type="table" />
      值：{{ url }}

      <div class="cpm-separator">路径多个：value-type="urlList"</div>
      <lg-upload v-model="urlList" value-type="urlList" type="table" />
      值：{{ urlList }}
    </t-card>

    <t-card header="文件限制">
      <div class="cpm-separator">文件大小限制：size="300KB"</div>
      <lg-upload size="300KB" />
      <div class="cpm-separator">文件大小限制：:size="50000"</div>
      <lg-upload :size="50000" />

      <div class="cpm-separator">数量限制：count="3"</div>
      <lg-upload count="3" />

      <div class="cpm-separator">类型限制：accept="image/*"</div>
      <lg-upload accept="image/*" />

      <div class="cpm-separator">类型限制：accept=".pdf,.doc"</div>
      <lg-upload accept=".pdf,.doc" />
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import { LgUpload } from '@/soar';

const def = ref([
  // {
  //   name: '微信截图_20231103214800.png',
  //   url: 'fixed/FXRIDe204VpxHyYS/1799093527285719041',
  //   size: 137635,
  //   id: '1799093527285719041',
  // },
]);
const url = ref('fixed/08DXySypLO4EHJEu/7204424434122227712/微信截图_20231103214745.png?$=153252');
const urlList = ref([
  'fixed/08DXySypLO4EHJEu/7204424434122227712/微信截图_20231103214745.png?$=153252',
  'fixed/FXRIDe204VpxHyYS/1799093527285719041/微信截图_20231103214800.png?$=137635',
]);
const info = ref({ n: '微信截图_20231103214745.png', u: 'fixed/08DXySypLO4EHJEu/7204424434122227712', s: 153252 });
const infoList = ref([
  { n: '微信截图_20231103214745.png', u: 'fixed/08DXySypLO4EHJEu/7204424434122227712', s: 153252 },
  { n: '微信截图_20231103214800.png', u: 'fixed/FXRIDe204VpxHyYS/1799093527285719041', s: 137635 },
]);

const propsData = [
  { name: 'valueType', desc: '值类型', type: 'url | urlList | info | infoList | default', def: 'default' },
  { name: 'type', desc: '文件列表类型', type: 'img | table | list', def: 'list' },
  { name: 'accept', desc: '文件类型限制，参考<input accept />', type: 'string', def: '' },
  { name: 'count', desc: '文件数量限制', type: 'number | string', def: '' },
  { name: 'size', desc: '文件大小限制', type: 'number | string', def: '' },
  { name: 'disabled', desc: '是否禁用', type: 'boolean', def: 'false' },
  { name: 'manual', desc: '是否手动上传', type: 'boolean', def: 'false' },
  { name: 'fixedTrigger', desc: '固定触发按钮（文件达到数量限制不隐藏触发按钮）', type: 'boolean', def: 'false' },
];

const emitData = [
  { name: 'change', desc: '文件发生变化时都会触发', param: 'files，file' },
  { name: 'success', desc: '文件上传成功时触发', param: 'file' },
  { name: 'error', desc: '文件上传失败时触发', param: 'file' },
  { name: 'remove', desc: '文件被删除时触发', param: 'file' },
];

const apiData = [
  { name: 'choose', desc: '触发选择文件', type: 'function', sample: 'choose()' },
  { name: 'upload', desc: '触发文件上传', type: 'function', sample: 'upload()' },
  { name: 'remove', desc: '删除文件', type: 'function', sample: 'remove(file) 或者 remove(index)' },
  { name: 'files', desc: '文件列表', type: 'LgFile[]', sample: '' },
];

const slotData = [
  { name: 'default', desc: '选择文件触发按钮', scope: '' },
  { name: 'upload', desc: '手动上传触发按钮', scope: '' },
  { name: 'files', desc: '文件列表', scope: '' },
  { name: 'custom', desc: '完全自定义界面时使用，将覆盖所有内置界面', scope: 'files，choose，upload，remove' },
];
</script>
